<template>
  <div class="page">
    <el-form :model="searchForm" label-position="left" ref="sform" inline label-suffix=":" size="small" label-width="80px">
      <div class="flex wap flex-start">
        <el-form-item label="学员名称">
          <el-input v-model="searchForm.name" placeholder="请输入学员名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="家长电话">
          <el-input v-model="searchForm.phone" placeholder="请输入家长电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderstatus" placeholder="请选择" clearable>
            <el-option label="未缴费" :value="0"></el-option>
            <el-option label="已缴费" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="订单类型">
          <el-select v-model="searchForm.ordertype" placeholder="请选择" clearable>
            <el-option label="报课" :value="1"></el-option>
            <el-option label="商品" :value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="课程状态">
          <el-select v-model="searchForm.lessionstatus" placeholder="请选择" clearable>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="已完结" :value="2"></el-option>
            <el-option label="退费" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="flex wap flex-start">
        <el-form-item label="课程类型">
          <check-lesson @checkedItem="checkedLession" :itemId="searchForm.lessionid" />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="dataTime" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getData">查询</el-button>
          <el-button type="warning" @click="resetSearch">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="flex wap flex-between" style="padding: 0px 0 10px 0;width:100%">
      <div>
        <el-button type="success" @click="addItem">新增</el-button>
        <div style="width:20px"></div>
      </div>
      <div class="flex">
        <el-button type="primary" @click="exportPay" plain>导出缴费</el-button>
        <div style="width:20px"></div>
        <import-file @uploadUrl="importPay">
          <el-button type="success" plain>导入缴费</el-button>
        </import-file>
        <div style="width:20px"></div>
        <el-button type="warning" @click="payMoBan" plain>下载模板</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%"  height="600"  :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
        'text-align': 'center'
      }"
      @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center' }">
      <el-table-column type="selection"></el-table-column>
      <!-- <el-table-column prop="paymentid" label="订单号" width="70"></el-table-column> -->
      <el-table-column prop="stuname" label="学员姓名" width="80" fixed="left"></el-table-column>
      <el-table-column prop="stuphone" label="手机号" width="110"></el-table-column>
      <el-table-column prop="lessioninfo" label="课程信息" show-overflow-tooltip></el-table-column>
      <el-table-column prop="empname" label="任课老师" show-overflow-tooltip></el-table-column>
      <el-table-column prop="alltimes" label="已上/总课次" width="150">
        <template slot-scope="scop">
          {{ scop.row.usedtimes + " / " + scop.row.alltimes }}
          <el-progress :text-inside="true" :stroke-width="16" :percentage="((scop.row.usedtimes*100) / scop.row.alltimes).toFixed(2)*1"></el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="oldprice" label="原价" width="60"></el-table-column>
      <el-table-column prop="newprice" label="优惠价" width="80"></el-table-column>
      <el-table-column prop="orderstatus" label="是否缴费" width="80">
        <template slot-scope="scop">
          <el-tag type="warning" v-if="scop.row.orderstatus == 0">未缴费</el-tag>
          <el-tag type="success" v-if="scop.row.orderstatus == 1">已缴费</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" label="课程状态" width="80">
        <template slot-scope="scop">
          <el-tag type="success" v-if="scop.row.lessionstatus == 1">正常</el-tag>
          <el-tag type="parmary" v-if="scop.row.lessionstatus == 2">完结</el-tag>
          <el-tag type="warning" v-if="scop.row.lessionstatus == 3">退费</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payinfo" label="付款信息" show-overflow-tooltip></el-table-column>
      <el-table-column prop="paytime" label="付款时间"  show-overflow-tooltip></el-table-column>
      <el-table-column prop="reason" label="备注信息" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" width="120" fixed="right">
        <template slot-scope="scop">
          <el-button type="primary" icon="el-icon-edit" circle @click="editItem(scop.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scop.row.paymentid)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float:right;padding:10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="isEdit?'修改报名单':'新增报名单'" center :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="editForm" :rules="rules" ref="paymentForm" label-width="100px" label-suffix=":" class="edit-form">
        <el-form-item label="报名学员" prop="stuid">
          <!-- <item-select :itemId="editForm.stuid" @checkedItem="checkedStuItem" type='stu' :disabled="isEdit"></item-select> -->
          <check-stu :itemId="editForm.stuid" @checkedItem="checkedStuItem" :disabled="isEdit"/>
        </el-form-item>
        <el-form-item label="任课老师" prop="empid">
          <!-- <item-select :itemId="editForm.empid" @checkedItem="checkedItem" type='emp'></item-select> -->
          <check-emp :itemId="editForm.empid" @checkedItem="checkedItem"/>
        </el-form-item>
        <el-form-item label="课程信息" prop="lessioninfo" v-if="isEdit">
          <el-input v-model="editForm.lessioninfo" clear disabled></el-input>
        </el-form-item>
        <el-form-item label="选择课程" prop="lessionid" v-else>
          <!-- <item-select :itemId="editForm.lessionid" @checkedItemObj="checkedLeCardItem" type='leCard'></item-select> -->
          <check-lession-type-card :itemId="editForm.lessionid" @checkedItemObj="checkedLeCardItem"/>
        </el-form-item>

        <div class="flex">
          <el-form-item label="优惠价" prop="newprice">
            <el-input v-model="editForm.newprice" placeholder="请输入优惠价" clear></el-input>
          </el-form-item>
          <el-form-item label="原价" prop="oldprice">
            <el-input v-model="editForm.oldprice" placeholder="请输入原价" ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="已上课次" prop="usedtimes">
            <el-input v-model="editForm.usedtimes" placeholder="请输入已上课次数" pattern="^\d+(\.\d+)?$" clear></el-input>
          </el-form-item>
          <el-form-item label="总课次" prop="alltimes">
            <el-input v-model="editForm.alltimes" placeholder="请输入总课次" ></el-input>
          </el-form-item>
        </div>

        <el-form-item label="是否缴费" prop="orderstatus">
          <el-radio-group v-model="editForm.orderstatus">
            <el-radio :label="0">未缴费</el-radio>
            <el-radio :label="1">已缴费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付款信息" prop="payinfo">
          <el-input v-model="editForm.payinfo" placeholder="请输入付款信息" clear></el-input>
        </el-form-item>
        <el-form-item label="付款时间" prop="paytime">
          <el-date-picker v-model="editForm.paytime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择付款时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="课程状态" prop="lessionstatus" v-if="isEdit">
          <el-radio-group v-model="editForm.lessionstatus">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">已完结</el-radio>
            <el-radio :label="3">已退费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注信息" prop="reason">
          <el-input type="textarea" :rows="2" placeholder="请输入备注信息" v-model="editForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddOrUpdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findPaymentLog, findEmp, updatePaymentLog, addPaymentLog, delPaymentLog, importPaymentMuban, importPayment, exportPayment } from "@/api/user"
import checkLessionTypeCard from "@/views/components/checkLessionTypeCard";
import checkStu from "@/views/components/checkStu";
import checkEmp from "@/views/components/checkEmp";
import checkLesson from "@/views/components/checkLesson";
export default {
  components: {
    checkEmp,
    checkStu,
    checkLesson,
    checkLessionTypeCard
  },
  data() {
    return {
      total: 0,
      stuname: "",
      stuphone: "",
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      searchForm: {
        name: '',
        phone: '',
        orderstatus: '',
        lessionstatus: '',
        ordertype: '',
        lessionid:'',
        begintime: '',
        endtime: ''
      },
      dialogFormVisible: false,
      empLoading: false,
      EmpOptions: [],
      EmpOptionsCopy: [],
      dataTime: [],
      selectionList:[],
      // edit
      editForm: {
        paymentid: '',
        empid: '',
        stuid: '',
        lessionid: '',
        lessioninfo: '',
        newprice: '',
        oldprice: '',
        usedtimes: '',
        alltimes: '',
        orderstatus: '',
        payinfo: '',
        paytime: '',
        reason: '',
        lessionstatus: ''
      },
      rules: {
        stuid: [
          { required: true, message: '必须选择学员', trigger: 'change' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        lessionid: [
          { required: true, message: '必须选择课程', trigger: 'change' }
        ],
        newprice: [
          { required: true, message: '必须设置优惠价', trigger: 'change' },
          { pattern: /^\d+(\.\d+)?$/, message: '优惠价必须为数字值' }
        ],
        orderstatus: [
          { required: true, message: '必须选择是否缴费', trigger: 'change' },
        ],
        paytime: [
          { required: true, message: '必须选择付款时间', trigger: 'change' },
        ]
      },
    };
  },
  watch: {
    dataTime(n) {
      console.log(n);
      if (n) {
        this.searchForm.begintime = n[0]
        this.searchForm.endtime = n[1]
      } else {
        this.searchForm.begintime = ''
        this.searchForm.endtime = ''
      }
    }
  },
  computed: {
    isEdit() {
      return this.editForm.paymentid !== ''
    },
    queryData() {
      const { name, phone, orderstatus, lessionstatus, ordertype, begintime, endtime, lessionid} = this.searchForm
      return {
        stuname: name,
        stuphone: phone,
        orderstatus,
        lessionstatus,
        ordertype,
        begintime,
        endtime,
        lessionid,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
    },
    addtData() {
    },
    editData() {
      const { paymentid, empid, stuid, lessionid, lessioninfo, newprice, oldprice, usedtimes, alltimes, orderstatus, payinfo, paytime, reason, lessionstatus } = this.editForm
      return {
        paymentid,
        stuid,
        empid,
        lessionid,
        lessioninfo,
        newprice,
        oldprice,
        usedtimes,
        alltimes,
        orderstatus,
        payinfo,
        paytime,
        reason,
        lessionstatus
      };
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    resetSearch(){
      Object.assign(this.$data.searchForm, this.$options.data().searchForm)
      this.dataTime = []
      this.getData();
    },
    checkedLession(val) {
      this.searchForm.lessionid = val
    },
    async importPay(url) {
      const res = await importPayment.post({importUrl: url});
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.$download(res.data, this.$Url + '/uploadtemp/' + res.data)
        this.getData()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async payMoBan() {
      const res = await importPaymentMuban.post();
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.$download(res.data, this.$Url + '/uploadtemp/' + res.data)
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    exportPay() {
      if (this.selectionList.length > 0) {
        this.$confirm("此操作将导出【"+ this.selectionList.length +"】条数据, 是否继续?", "提示", {
          confirmButtonText: "确认导出",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const ids = this.selectionList.map(e => e.paymentid)
          this.exportFun({paymentIds: ids})
        })
      } else {
        this.$confirm("此操作将导出全部数据, 是否继续?", "提示", {
          confirmButtonText: "确认导出",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportFun(this.queryData)
        })
      }
    },
    handleSelectionChange(val) {
      this.selectionList = val
    },
    async exportFun(val) {
      const res = await exportPayment.post(val);
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.$download(res.data, this.$Url + '/uploadtemp/' + res.data)
        this.getData()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async getData() {
      const res = await findPaymentLog.post(this.queryData);
      if (res.resultCode === "000000") {
        this.tableData = res.data.paymentloglist;
        this.total = res.data.count;
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    checkedItem(val) {
      this.editForm.empid = val
    },
    checkedStuItem(val) {
      this.editForm.stuid = val
    },
    checkedLeCardItem(item) {
      this.editForm.lessionid = item.lessiontypecardid
      this.editForm.newprice = item.price
      this.editForm.oldprice = item.price
      this.editForm.alltimes = item.times
      this.editForm.usedtimes = 0
      this.editForm.lessioninfo = item.lessionname + '-' + item.typename + '-' + item.cardname
    },
    editItem(row) {
      const { paymentid, empid, stuid, lessioninfo, newprice, oldprice, usedtimes, alltimes, orderstatus, payinfo, paytime, reason, lessionstatus } = row
      this.editForm.paymentid = paymentid
      this.editForm.empid = empid
      this.editForm.stuid = stuid
      this.editForm.lessioninfo = lessioninfo
      this.editForm.newprice = newprice
      this.editForm.oldprice = oldprice
      this.editForm.usedtimes = usedtimes
      this.editForm.alltimes = alltimes
      this.editForm.orderstatus = orderstatus
      this.editForm.payinfo = payinfo
      this.editForm.paytime = paytime
      this.editForm.reason = reason
      this.editForm.lessionstatus = lessionstatus
      this.dialogFormVisible = true
    },
    addItem() {
      this.dialogFormVisible = true
      this.$refs['paymentForm'] ? this.$refs['paymentForm'].resetFields() : ''
      Object.assign(this.$data.editForm, this.$options.data().editForm)
    },
    saveAddOrUpdata() {
      this.$refs['paymentForm'].validate((valid) => {
        if (valid) {
          this.AddOrUpdata()
        } else {
          return false;
        }
      });
    },
    async AddOrUpdata() {
      if (this.isEdit) {
        const res = await updatePaymentLog.post(this.editData);
        if (res.resultCode === "000000") {
          this.$message.success(res.resultInfo);
          this.dialogFormVisible = false
          this.getData()
        } else {
          this.$message.error(res.resultInfo);
        }
      } else {
        const res = await addPaymentLog.post(this.editData);
        if (res.resultCode === "000000") {
          this.$message.success(res.resultInfo);
          this.dialogFormVisible = false
          this.getData()
        } else {
          this.$message.error(res.resultInfo);
        }
      }
    },
    del(paymentid) {
      console.log(paymentid, 55);
      if (paymentid) {

      }
      this.$confirm("此操作将删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delPaymentLog.post({ paymentid: paymentid }).then(res => {
          if (res.resultCode === "000000") {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
            this.getData()
          } else {
            this.$message.error(res.resultInfo);
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    }
  }
};
</script>
<style lang="scss">
.el-select {
  width: 100%;
}
.el-input__inner {
  width: 100%;
}
</style>
